<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>节点 API 总结 | Guru Note</title>
    <meta name="generator" content="VuePress 1.7.1">
    <link rel="stylesheet" href="./font/index.css">
    <script src="/docs/icon/svg.js"></script>
    <meta name="description" content="Sea of dawn">
    
    <link rel="preload" href="/docs/assets/css/0.styles.efa081cd.css" as="style"><link rel="preload" href="/docs/assets/js/app.cdec4db9.js" as="script"><link rel="preload" href="/docs/assets/js/2.993bd611.js" as="script"><link rel="preload" href="/docs/assets/js/54.83f12d1e.js" as="script"><link rel="preload" href="/docs/assets/js/7.5a12abef.js" as="script"><link rel="prefetch" href="/docs/assets/js/10.c3177bdb.js"><link rel="prefetch" href="/docs/assets/js/100.60c23478.js"><link rel="prefetch" href="/docs/assets/js/101.7ea29e1b.js"><link rel="prefetch" href="/docs/assets/js/102.7f47e485.js"><link rel="prefetch" href="/docs/assets/js/103.ea9ce400.js"><link rel="prefetch" href="/docs/assets/js/104.4ec6a518.js"><link rel="prefetch" href="/docs/assets/js/105.75526347.js"><link rel="prefetch" href="/docs/assets/js/106.01f6b03b.js"><link rel="prefetch" href="/docs/assets/js/107.69fe0811.js"><link rel="prefetch" href="/docs/assets/js/108.fa23768b.js"><link rel="prefetch" href="/docs/assets/js/109.90df1698.js"><link rel="prefetch" href="/docs/assets/js/11.54347528.js"><link rel="prefetch" href="/docs/assets/js/110.dd8d7227.js"><link rel="prefetch" href="/docs/assets/js/111.ccf25ceb.js"><link rel="prefetch" href="/docs/assets/js/112.6963298f.js"><link rel="prefetch" href="/docs/assets/js/113.30ceb3d8.js"><link rel="prefetch" href="/docs/assets/js/114.42ef6603.js"><link rel="prefetch" href="/docs/assets/js/115.f1db7817.js"><link rel="prefetch" href="/docs/assets/js/116.92971223.js"><link rel="prefetch" href="/docs/assets/js/117.c5a65e7e.js"><link rel="prefetch" href="/docs/assets/js/118.e329035d.js"><link rel="prefetch" href="/docs/assets/js/119.cbb17c5e.js"><link rel="prefetch" href="/docs/assets/js/12.c8144ee8.js"><link rel="prefetch" href="/docs/assets/js/120.8537f6a6.js"><link rel="prefetch" href="/docs/assets/js/121.257d3851.js"><link rel="prefetch" href="/docs/assets/js/122.96a5f921.js"><link rel="prefetch" href="/docs/assets/js/123.2220fd12.js"><link rel="prefetch" href="/docs/assets/js/124.552b1a29.js"><link rel="prefetch" href="/docs/assets/js/125.4e36fe37.js"><link rel="prefetch" href="/docs/assets/js/126.3939cdcc.js"><link rel="prefetch" href="/docs/assets/js/127.014df434.js"><link rel="prefetch" href="/docs/assets/js/13.edc237a8.js"><link rel="prefetch" href="/docs/assets/js/14.66270d4f.js"><link rel="prefetch" href="/docs/assets/js/15.0804164b.js"><link rel="prefetch" href="/docs/assets/js/16.dec928ab.js"><link rel="prefetch" href="/docs/assets/js/17.bbfc90a8.js"><link rel="prefetch" href="/docs/assets/js/18.76904860.js"><link rel="prefetch" href="/docs/assets/js/19.80a98011.js"><link rel="prefetch" href="/docs/assets/js/20.c39e42bd.js"><link rel="prefetch" href="/docs/assets/js/21.287b744a.js"><link rel="prefetch" href="/docs/assets/js/22.c9506be7.js"><link rel="prefetch" href="/docs/assets/js/23.9732a229.js"><link rel="prefetch" href="/docs/assets/js/24.21ed1f05.js"><link rel="prefetch" href="/docs/assets/js/25.8f1926f6.js"><link rel="prefetch" href="/docs/assets/js/26.61b6eb9f.js"><link rel="prefetch" href="/docs/assets/js/27.3706753c.js"><link rel="prefetch" href="/docs/assets/js/28.b6b182cf.js"><link rel="prefetch" href="/docs/assets/js/29.ae979ad9.js"><link rel="prefetch" href="/docs/assets/js/3.a7f8dd77.js"><link rel="prefetch" href="/docs/assets/js/30.f2233269.js"><link rel="prefetch" href="/docs/assets/js/31.06780314.js"><link rel="prefetch" href="/docs/assets/js/32.2dad91d1.js"><link rel="prefetch" href="/docs/assets/js/33.87ec6e22.js"><link rel="prefetch" href="/docs/assets/js/34.7b75f220.js"><link rel="prefetch" href="/docs/assets/js/35.3184991f.js"><link rel="prefetch" href="/docs/assets/js/36.28248fbe.js"><link rel="prefetch" href="/docs/assets/js/37.5824a979.js"><link rel="prefetch" href="/docs/assets/js/38.99a364fe.js"><link rel="prefetch" href="/docs/assets/js/39.a5f43732.js"><link rel="prefetch" href="/docs/assets/js/4.a55d89ed.js"><link rel="prefetch" href="/docs/assets/js/40.629f78f7.js"><link rel="prefetch" href="/docs/assets/js/41.e4f58d1c.js"><link rel="prefetch" href="/docs/assets/js/42.9f41aa47.js"><link rel="prefetch" href="/docs/assets/js/43.636412b6.js"><link rel="prefetch" href="/docs/assets/js/44.3b491aef.js"><link rel="prefetch" href="/docs/assets/js/45.77df19bc.js"><link rel="prefetch" href="/docs/assets/js/46.01f53ddd.js"><link rel="prefetch" href="/docs/assets/js/47.476e85c9.js"><link rel="prefetch" href="/docs/assets/js/48.198502dc.js"><link rel="prefetch" href="/docs/assets/js/49.0d59d332.js"><link rel="prefetch" href="/docs/assets/js/5.1597c0f8.js"><link rel="prefetch" href="/docs/assets/js/50.02baf101.js"><link rel="prefetch" href="/docs/assets/js/51.c9fbd54d.js"><link rel="prefetch" href="/docs/assets/js/52.4cb4459b.js"><link rel="prefetch" href="/docs/assets/js/53.248450d7.js"><link rel="prefetch" href="/docs/assets/js/55.b18accba.js"><link rel="prefetch" href="/docs/assets/js/56.8a160b09.js"><link rel="prefetch" href="/docs/assets/js/57.b854a940.js"><link rel="prefetch" href="/docs/assets/js/58.4500f315.js"><link rel="prefetch" href="/docs/assets/js/59.59400e36.js"><link rel="prefetch" href="/docs/assets/js/6.887ba020.js"><link rel="prefetch" href="/docs/assets/js/60.4dd5b5bb.js"><link rel="prefetch" href="/docs/assets/js/61.50d8c8f6.js"><link rel="prefetch" href="/docs/assets/js/62.17d10daa.js"><link rel="prefetch" href="/docs/assets/js/63.d5f821cc.js"><link rel="prefetch" href="/docs/assets/js/64.7bf2519f.js"><link rel="prefetch" href="/docs/assets/js/65.0a1c9bc8.js"><link rel="prefetch" href="/docs/assets/js/66.1bcaa81c.js"><link rel="prefetch" href="/docs/assets/js/67.326bdf9b.js"><link rel="prefetch" href="/docs/assets/js/68.2b3b63b2.js"><link rel="prefetch" href="/docs/assets/js/69.c9b1a1a9.js"><link rel="prefetch" href="/docs/assets/js/70.a5fede78.js"><link rel="prefetch" href="/docs/assets/js/71.288d9643.js"><link rel="prefetch" href="/docs/assets/js/72.8665d6b8.js"><link rel="prefetch" href="/docs/assets/js/73.47155429.js"><link rel="prefetch" href="/docs/assets/js/74.4d4738f8.js"><link rel="prefetch" href="/docs/assets/js/75.659a325f.js"><link rel="prefetch" href="/docs/assets/js/76.a263f692.js"><link rel="prefetch" href="/docs/assets/js/77.9d86d59e.js"><link rel="prefetch" href="/docs/assets/js/78.a41b5d88.js"><link rel="prefetch" href="/docs/assets/js/79.5d0fc4cc.js"><link rel="prefetch" href="/docs/assets/js/8.80d0c81d.js"><link rel="prefetch" href="/docs/assets/js/80.01a11f6a.js"><link rel="prefetch" href="/docs/assets/js/81.9c0207d9.js"><link rel="prefetch" href="/docs/assets/js/82.12be8e04.js"><link rel="prefetch" href="/docs/assets/js/83.00fa5f46.js"><link rel="prefetch" href="/docs/assets/js/84.f14cd53c.js"><link rel="prefetch" href="/docs/assets/js/85.e9d7c0d1.js"><link rel="prefetch" href="/docs/assets/js/86.eb78fbbf.js"><link rel="prefetch" href="/docs/assets/js/87.8a31f5ae.js"><link rel="prefetch" href="/docs/assets/js/88.0f10e6dc.js"><link rel="prefetch" href="/docs/assets/js/89.a17253c9.js"><link rel="prefetch" href="/docs/assets/js/9.2fa568cb.js"><link rel="prefetch" href="/docs/assets/js/90.e56bc609.js"><link rel="prefetch" href="/docs/assets/js/91.5277db18.js"><link rel="prefetch" href="/docs/assets/js/92.b0bb8aa7.js"><link rel="prefetch" href="/docs/assets/js/93.cd790b77.js"><link rel="prefetch" href="/docs/assets/js/94.76bbe227.js"><link rel="prefetch" href="/docs/assets/js/95.4f07ca32.js"><link rel="prefetch" href="/docs/assets/js/96.2b1e8485.js"><link rel="prefetch" href="/docs/assets/js/97.e93b3461.js"><link rel="prefetch" href="/docs/assets/js/98.658063a1.js"><link rel="prefetch" href="/docs/assets/js/99.a3642e6d.js">
    <link rel="stylesheet" href="/docs/assets/css/0.styles.efa081cd.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/docs/" class="home-link router-link-active"><!----> <span class="site-name">Guru Note</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----> <svg aria-hidden="true" class="icon search-icon"><use xlink:href="#icon-search"></use></svg></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/docs/layout/" class="nav-link">
  CSS 手册
</a></div><div class="nav-item"><a href="/docs/js/" class="nav-link router-link-active">
  JavaScript
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端进阶" class="dropdown-title"><span class="title">前端进阶</span> <span class="arrow down"></span></button> <button type="button" aria-label="前端进阶" class="mobile-dropdown-title"><span class="title">前端进阶</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          前端框架
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/docs/vue/" class="nav-link">
  Vue.js
</a></li><li class="dropdown-subitem"><a href="/docs/react/" class="nav-link">
  React.js
</a></li></ul></li><li class="dropdown-item"><h4>
          拓展语言
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/docs/node/" class="nav-link">
  Node.js
</a></li><li class="dropdown-subitem"><a href="/docs/ts/" class="nav-link">
  TypeScript
</a></li></ul></li></ul></div></div><div class="nav-item"><a href="/docs/devbook/" class="nav-link">
  开发手册
</a></div><div class="nav-item"><a href="/docs/exam/" class="nav-link">
  金九银十
</a></div><div class="nav-item"><a href="/docs/message/" class="nav-link">
  留言板
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><div class="el-scrollbar"><div class="scrollbar-wrapper el-scrollbar__wrap el-scrollbar__wrap--hidden-default"><div class="el-scrollbar__view"><nav class="nav-links"><div class="nav-item"><a href="/docs/layout/" class="nav-link">
  CSS 手册
</a></div><div class="nav-item"><a href="/docs/js/" class="nav-link router-link-active">
  JavaScript
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端进阶" class="dropdown-title"><span class="title">前端进阶</span> <span class="arrow down"></span></button> <button type="button" aria-label="前端进阶" class="mobile-dropdown-title"><span class="title">前端进阶</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          前端框架
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/docs/vue/" class="nav-link">
  Vue.js
</a></li><li class="dropdown-subitem"><a href="/docs/react/" class="nav-link">
  React.js
</a></li></ul></li><li class="dropdown-item"><h4>
          拓展语言
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/docs/node/" class="nav-link">
  Node.js
</a></li><li class="dropdown-subitem"><a href="/docs/ts/" class="nav-link">
  TypeScript
</a></li></ul></li></ul></div></div><div class="nav-item"><a href="/docs/devbook/" class="nav-link">
  开发手册
</a></div><div class="nav-item"><a href="/docs/exam/" class="nav-link">
  金九银十
</a></div><div class="nav-item"><a href="/docs/message/" class="nav-link">
  留言板
</a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/docs/js/" aria-current="page" class="sidebar-link">介绍</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>JavaScript</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/js/base/type-of-data.html" class="sidebar-link">JS 的数据类型</a></li><li><a href="/docs/js/base/object.html" class="sidebar-link">JS 对象的常用属性</a></li><li><a href="/docs/js/base/function.html" class="sidebar-link">函数 &amp; 原型链</a></li><li><a href="/docs/js/base/dom-api.html" class="sidebar-link">DOM API 总结</a></li><li><a href="/docs/js/base/node-api.html" aria-current="page" class="active sidebar-link">节点 API 总结</a></li><li><a href="/docs/js/base/node-list.html" class="sidebar-link">节点中的伪数组</a></li><li><a href="/docs/js/base/dom-operate-across-threads.html" class="sidebar-link">DOM 操作跨线程</a></li><li><a href="/docs/js/base/create-jquery.html" class="sidebar-link">jQuery 中的链式操作</a></li><li><a href="/docs/js/base/plugin.html" class="sidebar-link">JavaScript 插件 / 库</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>ES6</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/js/es6/scope.html" class="sidebar-link">作用域</a></li><li><a href="/docs/js/es6/new-object.html" class="sidebar-link">新版对象</a></li><li><a href="/docs/js/es6/anatomy-assignment.html" class="sidebar-link">参数处理 &amp; 解构赋值</a></li><li><a href="/docs/js/es6/new-string.html" class="sidebar-link">新版字符串</a></li><li><a href="/docs/js/es6/module-use.html" class="sidebar-link">ES6 模块化</a></li><li><a href="/docs/js/es6/promise-usage.html" class="sidebar-link">Promise</a></li><li><a href="/docs/js/es6/await-and-async.html" class="sidebar-link">async 和 await 的用法</a></li><li><a href="/docs/js/es6/symbol-iterate-generate.html" class="sidebar-link">Symbol &amp; 迭代器 &amp; 生成器</a></li><li><a href="/docs/js/es6/arrow-function.html" class="sidebar-link">箭头函数</a></li><li><a href="/docs/js/es6/new-api.html" class="sidebar-link">ES6 新增 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>JavaScript 进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/js/part/ajax-use.html" class="sidebar-link">AJAX</a></li><li><a href="/docs/js/part/cross-domain.html" class="sidebar-link">跨域 &amp; CORS &amp; JSONP</a></li><li><a href="/docs/js/part/browser-storage.html" class="sidebar-link">浏览器模型</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>JS 小记</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/js/note/project.html" class="sidebar-link">JavaScript 搭建项目</a></li><li><a href="/docs/js/note/js-garbage.html" class="sidebar-link">JS 的缺陷</a></li><li><a href="/docs/js/note/setInterval-a-setTimeout.html" class="sidebar-link">使用 setTimeout 实现 setInterval</a></li><li><a href="/docs/js/note/array-deduplica.html" class="sidebar-link">数组去重</a></li><li><a href="/docs/js/note/download-file.html" class="sidebar-link">使用 JS 下载文件</a></li><li><a href="/docs/js/note/top-nav.html" class="sidebar-link">设置导航动态显示 / 隐藏</a></li><li><a href="/docs/js/note/anchor-transition.html" class="sidebar-link">JS 实现点击锚点过渡效果</a></li><li><a href="/docs/js/note/data-list.html" class="sidebar-link">数据处理</a></li></ul></section></li></ul> </div></div><div class="el-scrollbar__bar is-horizontal"><div class="el-scrollbar__thumb" style="width:0;transform:translateX(0%);ms-transform:translateX(0%);webkit-transform:translateX(0%);"></div></div><div class="el-scrollbar__bar is-vertical"><div class="el-scrollbar__thumb" style="height:0;transform:translateY(0%);ms-transform:translateY(0%);webkit-transform:translateY(0%);"></div></div></div></aside> <main class="page"> <div class="re-page-top"><h1 class="title"><span>节点 API 总结</span></h1> <div class="re-page-index"><div class="page-index-title"><span class="open-catalog"><svg aria-hidden="true" class="icon arrow-right"><use xlink:href="#icon-bold-right"></use></svg> <span class="text">目录</span></span></div> <div class="page-index-content"><div class="page-catalog" style="display:none;"><div class="synopsis-wrap"><ul class="synopsis-ul"><li class="synopsis-li"><a href="/docs/js/base/node-api.html#创建节点" class="synopsis-link">创建节点</a></li><li class="synopsis-li"><a href="/docs/js/base/node-api.html#添加节点" class="synopsis-link">添加节点</a><ul class="synopsis-ul"><li class="synopsis-li"><a href="/docs/js/base/node-api.html#代码题" class="synopsis-link">代码题</a></li></ul></li><li class="synopsis-li"><a href="/docs/js/base/node-api.html#克隆节点" class="synopsis-link">克隆节点</a></li><li class="synopsis-li"><a href="/docs/js/base/node-api.html#删除节点" class="synopsis-link">删除节点</a></li><li class="synopsis-li"><a href="/docs/js/base/node-api.html#修改节点属性" class="synopsis-link">修改节点属性</a><ul class="synopsis-ul"><li class="synopsis-li"><a href="/docs/js/base/node-api.html#修改-data-属性" class="synopsis-link">修改 data 属性</a></li><li class="synopsis-li"><a href="/docs/js/base/node-api.html#获取属性" class="synopsis-link">获取属性</a></li></ul></li><li class="synopsis-li"><a href="/docs/js/base/node-api.html#div-onclick-的原理" class="synopsis-link">div.onclick 的原理</a></li><li class="synopsis-li"><a href="/docs/js/base/node-api.html#修改节点内容" class="synopsis-link">修改节点内容</a></li><li class="synopsis-li"><a href="/docs/js/base/node-api.html#获取节点" class="synopsis-link">获取节点</a><ul class="synopsis-ul"><li class="synopsis-li"><a href="/docs/js/base/node-api.html#获取粑粑" class="synopsis-link">获取粑粑</a></li><li class="synopsis-li"><a href="/docs/js/base/node-api.html#获取爷爷" class="synopsis-link">获取爷爷</a></li><li class="synopsis-li"><a href="/docs/js/base/node-api.html#获取儿子" class="synopsis-link">获取儿子</a></li><li class="synopsis-li"><a href="/docs/js/base/node-api.html#获取兄弟姐妹" class="synopsis-link">获取兄弟姐妹</a></li><li class="synopsis-li"><a href="/docs/js/base/node-api.html#获取所有子孙节点" class="synopsis-link">获取所有子孙节点</a></li></ul></li><li class="synopsis-li"><a href="/docs/js/base/node-api.html#更多api" class="synopsis-link">更多API</a></li><li class="synopsis-li"><a href="/docs/js/base/node-api.html#更多方法" class="synopsis-link">更多方法</a></li></ul></div></div></div></div></div> <div class="theme-default-content content__default"><div class="custom-block tip"><p class="custom-block-title">注意</p> <p>在JS中，元素和节点是不同的，节点包含了元素、文本、注释等。</p></div> <h2 id="创建节点"><a href="#创建节点" class="header-anchor">#</a> 创建节点</h2> <p>创建一个标签节点</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> div <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span>
</code></pre></div><p>创建一个文本节点</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> text <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createTextNode</span><span class="token punctuation">(</span><span class="token string">'你好'</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="添加节点"><a href="#添加节点" class="header-anchor">#</a> 添加节点</h2> <p>在标签中插入文本</p> <div class="language-js extra-class"><pre class="language-js"><code>div<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>text<span class="token punctuation">)</span>
div<span class="token punctuation">.</span>innerText <span class="token operator">=</span> <span class="token string">'你好'</span>
div<span class="token punctuation">.</span>textContent <span class="token operator">=</span> <span class="token string">'你好'</span>
</code></pre></div><div class="custom-block tip"><p class="custom-block-title">注意</p> <p>默认创建的标签处于JS线程中，你必须把它插入到 head 或 body 标签中，它才会生效。可以使用 <code>document.body.appendChild(div)</code> 或 <code>页面中已存在的元素.appendChild(div)</code> 插入。</p></div> <h3 id="代码题"><a href="#代码题" class="header-anchor">#</a> 代码题</h3> <p>页面中有 <code>div#text1</code> 和 <code>div#text2</code> 两个 div，运行以下代码</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> div <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span>
text1<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>div<span class="token punctuation">)</span>
text2<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>div<span class="token punctuation">)</span>
</code></pre></div><p>请问div最终出现在哪里？</p> <ol><li>text1 里</li> <li>text2 里</li> <li>text1 和 text2 里</li></ol> <details class="custom-block details"><summary>答案</summary> <p>选第 2 项 ，只会出现在 text2 中，一个元素不能同时出现在两个地方，除非通过下面的方法(<code>cloneNode()</code>)复制一份。</p></details> <h2 id="克隆节点"><a href="#克隆节点" class="header-anchor">#</a> 克隆节点</h2> <p>可以使用 <code>cloneNode()</code> 方法克隆当前节点，克隆之后的节点就是一个新的节点。</p> <p><code>cloneNode()</code> 默认不传参会只拷贝当前节点（浅拷贝），如果传入 true ，则该节点的所有后代节点也都会被克隆（深拷贝）。</p> <div class="custom-block tip"><p class="custom-block-title">注意</p> <p>该方法会拷贝该节点的所有属性，但是会丧失 <code>addEventListener</code> 方法和 <code>on-属性</code>（即 <code>node.onclick = fn</code> ），添加在这个节点上的事件回调函数。</p></div> <h2 id="删除节点"><a href="#删除节点" class="header-anchor">#</a> 删除节点</h2> <ol><li><p>使用 <code>parentNode.removeChild(需要被删除的节点)</code></p></li> <li><p>使用 <code>需要被删除的节点.remove()</code></p></li></ol> <div class="custom-block tip"><p class="custom-block-title">注意</p> <p>使用上面两种方式删除，都只是从 DOM 树中删除该节点，它们依然会保存在内存中。</p></div> <h2 id="修改节点属性"><a href="#修改节点属性" class="header-anchor">#</a> 修改节点属性</h2> <ul><li>修改id：<code>元素.id</code></li> <li>修改class：<code>元素.className</code></li> <li>追加class：<code>元素.classList.add('red')</code></li></ul> <div class="custom-block info"><p class="custom-block-title">为什么修改 class 要使用 className？</p><p>早期 JS 的对象是不支持使用保留字作为它的 key 的（比如 if、class 等）</p></div><h3 id="修改-data-属性"><a href="#修改-data-属性" class="header-anchor">#</a> 修改 data 属性</h3> <p>带有 <code>data-</code> 前缀的属性是一种特殊的自定义属性</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> div <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span>
<span class="token comment">/* 添加 */</span>
div<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'data-x'</span><span class="token punctuation">,</span> <span class="token string">'text'</span><span class="token punctuation">)</span>  <span class="token comment">// &lt;div data-x=&quot;text&quot;&gt;&lt;/div&gt;</span>
<span class="token comment">/* 获取 1 */</span>
div<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token string">'data-x'</span><span class="token punctuation">)</span>  <span class="token comment">// text</span>
<span class="token comment">/* 获取 2 */</span>
div<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>x  <span class="token comment">// text</span>
<span class="token comment">/* 修改 */</span>
div<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>x <span class="token operator">=</span> <span class="token string">'jack'</span>
</code></pre></div><h3 id="获取属性"><a href="#获取属性" class="header-anchor">#</a> 获取属性</h3> <p>大部分属性都可以通过 <code>元素.xxx</code> 获取该属性的值，只有个别属性在获取时会被浏览器加工，比如 a 标签：</p> <p>获取如下 a 标签的 harf</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>test<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/child<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>不知名文字<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>示例：</p> <section class="re-part"><a id="test" href="/child">不知名文字</a></section> <p>获取该标签的 <code>href</code> 属性，这时浏览器会帮你自动补全当前的域名。</p> <div class="language-js extra-class"><pre class="language-js"><code>test<span class="token punctuation">.</span>href  <span class="token comment">// &quot;https://uphg.gitee.io/child&quot;</span>
</code></pre></div><p>如果你想获取更准确的 <code>href</code>，可以这么写</p> <div class="language-js extra-class"><pre class="language-js"><code>test<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token string">'href'</span><span class="token punctuation">)</span>  <span class="token comment">// &quot;/child&quot;</span>
</code></pre></div><h2 id="div-onclick-的原理"><a href="#div-onclick-的原理" class="header-anchor">#</a> <code>div.onclick</code> 的原理</h2> <p><code>div.onclick</code> 默认值为 <code>null</code>，所以默认点击 div 不会触发任何事件。当你给 div 的 <code>onclick</code> 属性附加一个函数 fn，div 被点击时就会执行该函数并这样调用该函数：<code>fn.call(div, event)</code>，其中的 div 就是当前被点击的 div，event 就是包含了点击事件的所有信息。</p> <h2 id="修改节点内容"><a href="#修改节点内容" class="header-anchor">#</a> 修改节点内容</h2> <p>修改文本内容</p> <ul><li><code>div.innerText = 'xxx'</code></li> <li><code>div.textContent = 'xxx'</code></li></ul> <div class="custom-block info"><p class="custom-block-title">它们的区别</p><p>它们的区别主要体现在获取文本内容时，textContent 属性返回当前节点和它的所有后代节点的文本内容。而 innerText 只会返回文本内容，不会返回文本前后包裹的空格回车节点。</p></div><p>修改html内容</p> <ul><li><code>div.innerHTML = '&lt;b&gt;文本内容&lt;/b&gt;'</code></li></ul> <p>修改标签</p> <ul><li><code>div.innerHTML = ''</code></li> <li><code>div.appendChild(div2)</code></li></ul> <h2 id="获取节点"><a href="#获取节点" class="header-anchor">#</a> 获取节点</h2> <h3 id="获取粑粑"><a href="#获取粑粑" class="header-anchor">#</a> 获取粑粑</h3> <div class="language-js extra-class"><pre class="language-js"><code>node<span class="token punctuation">.</span>parentNode       <span class="token comment">// 节点</span>
<span class="token comment">// 或</span>
node<span class="token punctuation">.</span>parentElement    <span class="token comment">// 元素</span>
</code></pre></div><h3 id="获取爷爷"><a href="#获取爷爷" class="header-anchor">#</a> 获取爷爷</h3> <div class="language-js extra-class"><pre class="language-js"><code>node<span class="token punctuation">.</span>parentNode<span class="token punctuation">.</span>parentNode
</code></pre></div><h3 id="获取儿子"><a href="#获取儿子" class="header-anchor">#</a> 获取儿子</h3> <div class="language-js extra-class"><pre class="language-js"><code>node<span class="token punctuation">.</span>childNodes  <span class="token comment">// 节点</span>
<span class="token comment">// 或</span>
node<span class="token punctuation">.</span>children    <span class="token comment">// 元素</span>
</code></pre></div><p>上面两种方式获取子节点，当子节点被修改或删除时，它们也会实时变化自己的状态(如 length 属性)，更新子节点信息。而通过<code>document.querySelectorAll('div')</code>获取的元素，不会根据子节点的变化实时更新自己的状态。案例如下：</p> <p>假如有如下结构的 ul</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>test<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>使用 <code>父元素.children</code> 获取所有 li 子元素后删除一个子元素</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> li <span class="token operator">=</span> test<span class="token punctuation">.</span>children
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>li<span class="token punctuation">.</span>length<span class="token punctuation">)</span>  <span class="token comment">// 3</span>
test<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'li'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>li<span class="token punctuation">.</span>length<span class="token punctuation">)</span>  <span class="token comment">// 2</span>
</code></pre></div><p>使用 <code>document.querySelectorAll()</code> 获取所有 li 子元素后删除一个子元素</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> li <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'li'</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>li<span class="token punctuation">.</span>length<span class="token punctuation">)</span>  <span class="token comment">// 3</span>
test<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'li'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>li<span class="token punctuation">.</span>length<span class="token punctuation">)</span>  <span class="token comment">// 3</span>
</code></pre></div><p>可以看到，通过 <code>父元素.children</code> 打印的结果会跟随子节点的状态实时更新，而通过 <code>document.querySelectorAll()</code> 打印的结果始终不会变化。</p> <h3 id="获取兄弟姐妹"><a href="#获取兄弟姐妹" class="header-anchor">#</a> 获取兄弟姐妹</h3> <p>假如一个 div 有如下结构</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>div<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>获取第二个 div 元素的所有兄弟姐妹元素（除了第二个以外的所有兄弟元素）</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> siblings <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
<span class="token keyword">let</span> current <span class="token operator">=</span> div<span class="token punctuation">.</span>parentElement<span class="token punctuation">.</span>children
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> current<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>current<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">!==</span> div<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        siblings<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>current<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="获取所有子孙节点"><a href="#获取所有子孙节点" class="header-anchor">#</a> 获取所有子孙节点</h3> <p>假如一个 div 有如下结构</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>div<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>4.1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>4.2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>4.3.1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>遍历上面 div 中的所有子节点</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function-variable function">travel</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">node<span class="token punctuation">,</span> fn</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token function">fn</span><span class="token punctuation">(</span>node<span class="token punctuation">)</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>node<span class="token punctuation">.</span>childern<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> node<span class="token punctuation">.</span>children<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token function">travel</span><span class="token punctuation">(</span>node<span class="token punctuation">.</span>childern<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">,</span> fn<span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token function">travel</span><span class="token punctuation">(</span>div<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">node</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>node<span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre></div> <h2 id="更多api"><a href="#更多api" class="header-anchor">#</a> 更多API</h2> <p><strong>获取当前节点的子节点</strong></p> <div class="language-js extra-class"><pre class="language-js"><code>element<span class="token punctuation">.</span>childNodes    <span class="token comment">// 获取当前元素的所有子节点</span>
element<span class="token punctuation">.</span>firstChild    <span class="token comment">// 获取当前元素的第一个子节点</span>
element<span class="token punctuation">.</span>lastChild     <span class="token comment">// 获取当前元素的最后一个子节点</span>
</code></pre></div><p><strong>获取当前元素的子元素</strong></p> <div class="language-js extra-class"><pre class="language-js"><code>element<span class="token punctuation">.</span>children            <span class="token comment">// 获取当前元素的所有子元素</span>
element<span class="token punctuation">.</span>firstElementChild   <span class="token comment">// 获取当前元素的第一个子元素</span>
element<span class="token punctuation">.</span>lastElementChild    <span class="token comment">// 获取当前元素的最后一个子元素</span>
</code></pre></div><p><strong>获取当前元素的兄弟节点</strong></p> <div class="language-js extra-class"><pre class="language-js"><code>element<span class="token punctuation">.</span>previousSibling    <span class="token comment">// 上一个兄弟节点</span>
element<span class="token punctuation">.</span>nextSibling        <span class="token comment">// 下一个兄弟节点</span>
</code></pre></div><p><strong>获取当前元素的兄弟元素</strong></p> <div class="language-js extra-class"><pre class="language-js"><code>element<span class="token punctuation">.</span>previousElementSibling    <span class="token comment">// 上一个兄弟元素</span>
element<span class="token punctuation">.</span>nextElementSibling        <span class="token comment">// 下一个兄弟元素</span>
</code></pre></div><p><strong>获取当前元素的父元素</strong></p> <div class="language-js extra-class"><pre class="language-js"><code>element<span class="token punctuation">.</span>parentNode        <span class="token comment">// 获取父节点</span>
element<span class="token punctuation">.</span>parentElement     <span class="token comment">// 获取父元素（没啥用，父元素一定不是文本内容）</span>
</code></pre></div><p><strong>获取当前元素的文本内容</strong></p> <div class="language-js extra-class"><pre class="language-js"><code>element<span class="token punctuation">.</span>innerText      <span class="token comment">// 获取的文本不包含回车（text节点），只包含空格（回车会缩进为空格）</span>
element<span class="token punctuation">.</span>textContent    <span class="token comment">// 获取的文本包含回车（text节点）</span>
</code></pre></div><p>兼容性代码</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 判断textContent是否存在，存在就使用它，不存在就使用innerText</span>
<span class="token string">'textContent'</span> <span class="token keyword">in</span> document<span class="token punctuation">.</span>body <span class="token operator">?</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>textContent <span class="token operator">:</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>innerText
</code></pre></div><p><strong>获取标签名称(nodeName)</strong></p> <p>使用 nodeName 方式获取标签名称，除了 svg 以外的标签都为大写，由于 svg 是新添加的标签，所以显示小写</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">/* 获取当前节点的名称 */</span>
element<span class="token punctuation">.</span>nodeName
<span class="token comment">/* 获取&lt;html&gt;标签的名称，相较于其他比较特殊，需要加.documentElement */</span>
document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>nodeName
</code></pre></div><h2 id="更多方法"><a href="#更多方法" class="header-anchor">#</a> 更多方法</h2> <p><strong><code>isEqualNode()</code> 和 <code>isSameNode()</code></strong></p> <p>isEqualNode 表示判断两个节点是否长得一样，isSameNode 表示判断两个节点是否是同一个节点，例如：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>demo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>demo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> div1 <span class="token operator">=</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>children<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>   <span class="token comment">// 获取第一个demo</span>
<span class="token keyword">let</span> div2 <span class="token operator">=</span> document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>children<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span>   <span class="token comment">// 获取第二个demo</span>
<span class="token keyword">let</span> result1 <span class="token operator">=</span> div1<span class="token punctuation">.</span><span class="token function">isEqualNode</span><span class="token punctuation">(</span>div2<span class="token punctuation">)</span>   <span class="token comment">// true</span>
<span class="token keyword">let</span> result2 <span class="token operator">=</span> div1<span class="token punctuation">.</span><span class="token function">isSameNode</span><span class="token punctuation">(</span>div2<span class="token punctuation">)</span>    <span class="token comment">// false</span>
<span class="token keyword">let</span> result3 <span class="token operator">=</span> div1<span class="token punctuation">.</span><span class="token function">isSameNode</span><span class="token punctuation">(</span>div1<span class="token punctuation">)</span>    <span class="token comment">// true</span>
</code></pre></div><p>效果链接：https://jsbin.com/jaqadey/1/edit?html,js,output</p> <p><strong><code>removeChild()</code></strong></p> <p><s>干掉你的儿子</s>，删除一个子节点，但是只是在页面中删除它，它还是会在内存中存储。</p> <p><strong><code>replaceChild()</code></strong></p> <p><s>交换你的儿子</s>，用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点。</p> <p><strong><code>normalize()</code></strong></p> <p>将当前节点和它的后代节点&quot;规范化&quot;</p> <p>以下面代码为例，将 wrapper 中先后插入的两个文本节点（Part 1，Part 2）合并为一个文本节点。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> wrapper <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">&quot;div&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

wrapper<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span> document<span class="token punctuation">.</span><span class="token function">createTextNode</span><span class="token punctuation">(</span><span class="token string">&quot;Part 1 &quot;</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
wrapper<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span> document<span class="token punctuation">.</span><span class="token function">createTextNode</span><span class="token punctuation">(</span><span class="token string">&quot;Part 2 &quot;</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// At this point, wrapper.childNodes.length === 2</span>
<span class="token comment">// wrapper.childNodes[0].textContent === &quot;Part 1 &quot;</span>
<span class="token comment">// wrapper.childNodes[1].textContent === &quot;Part 2 &quot;</span>

wrapper<span class="token punctuation">.</span><span class="token function">normalize</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// Now, wrapper.childNodes.length === 1</span>
<span class="token comment">// wrapper.childNodes[0].textContent === &quot;Part 1 Part 2 &quot;</span>
</code></pre></div><p><strong><code>Node.prototype.getRootNode()</code></strong></p> <p>返回当前节点所在文档的根节点 <code>document</code></p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">上次更新：</span><span class="time">2021-05-04 13:36</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev"><svg aria-hidden="true" class="icon"><use xlink:href="#icon-left"></use></svg> <a href="/docs/js/base/dom-api.html" class="prev">DOM API 总结</a></span> <span class="next"><a href="/docs/js/base/node-list.html">节点中的伪数组</a> <svg aria-hidden="true" class="icon"><use xlink:href="#icon-right"></use></svg></span></p></div> </main></div><div class="global-ui"><!----><!----></div></div>
    <script src="/docs/assets/js/app.cdec4db9.js" defer></script><script src="/docs/assets/js/2.993bd611.js" defer></script><script src="/docs/assets/js/54.83f12d1e.js" defer></script><script src="/docs/assets/js/7.5a12abef.js" defer></script>
  </body>
</html>
